@import "m_reset.scss";
@import url(http://at.alicdn.com/t/c/font_3631103_yztr8wxsy3q.css);

@function getvw($w){
    @return ($w  /750)*100 + vw
}

.wrap{
    header{
        position: relative;
       
        // width: getvw(750);
        // height: getvw(130);
        .box{
            padding: getvw(50) getvw(10) getvw(9) getvw(7);
            width: getvw(705);
            height: getvw(57);
            
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin: 0 auto;
            // background-color: pink;
            
            button{
                width: getvw(123);
                height: getvw(57);
                border-radius: getvw(20);
                font-size: 0.28rem;
                border: 1px solid #ff9344;
                background-color: #fff;
            }
            p{
                text-align: center;
                font-size: 0.3467rem;
            }
            img{
                width: getvw(52);
                height: getvw(50);
            }
        }
        .banner{
            .container {
                width: 100%;
                height: getvw(287);
                overflow: hidden;
                
                ul {
                    display: flex;
                    width: 300%;
                    // line-height: getvw(280);
                    animation: move 3s ease  infinite alternate;
                    li {
                        width: calc(100% / 3);
                        /* flex:1干了哪些事情 */
                        // flex: 1;
                        /* 清除列表前面的小圆点 */
                        list-style: none;
                        text-align: center;
                        img{
                            width: 100%;
                            display: block;
                        }
                      }
                  }
              }
            
              
              @keyframes move {
               from,16%{
                transform: translateX(0%);
               }
               50%,66%{
                transform: translateX(calc(-100% / 3));
               }
               84%,to{
                transform: translateX(calc(-100% / 3 * 2));
               }
            }
            .yuan{
                display: flex;
                align-items: center;
                align-items: flex-end;
                justify-content: center;
                justify-content: space-between;
                width: getvw(110);
                height: getvw(90);
                background-color: pink;
                margin: 0 auto;
                
                .yuan_in{
                    width: getvw(18);
                    height: getvw(18);
                    background-color: #ff9344;
                    border-radius: 50%;
                    opacity: 0.5;
                    :nth-of-type(1){
                        background-color:#ff9344 ;
                    }
                    :hover{
                        background: #000;
                    }
                }
            }
        }   
    }
    main{
        .boxone{
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin: 0 auto;
            // background-color: pink;
            padding: getvw(36);
            width: getvw(666);
            height: getvw(59);
            p{
                font-size: getvw(57);
                color: #ff9344;
            }
            button{
                width: getvw(111);
                height: getvw(59);
                border-radius: getvw(20);
                color: #fff;
                background-color: #ff9344;
                border: none;
                font-size: .4rem;
            }
        }
        .boxtwo{
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin: 0 auto;
            width: getvw(666);
            height: getvw(36);
            // background-color: pink;
            .left{
                display: flex;
                align-items: center;
                .box_in{
                    display: flex;
                    align-items: center;
                    position: relative;
                    left: getvw(13);
                }
                img{
                    width: getvw(38);
                    height: getvw(36);
                }
                p{
                    font-size: .4rem;
                }
                span{
                    font-size: .4rem;
                    color: #ff9344;
                }
            }
            .right{
                color: #8e8e8e;
                font-size: .3467rem;
            }
        }
        .boxtree{
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin: 0 auto;
            width: getvw(664);
            height: getvw(67);
            background-color: #ff9344;
            margin-top: getvw(36);
            .left{
                padding: getvw(11);
            }
            .right{
                padding: getvw(11);
            }
        }
        .boki{
            display: flex;
            width: getvw(664);
            height: getvw(550);
            // background-color: pink;
            margin: 0 auto;
            justify-content: space-between;
            flex-wrap: wrap;
            margin-top: getvw(10);
            .left{
                display: flex;
                img{
                    
                    width: getvw(177);
                    height: getvw(176);
                }
                .left_in{
                    position: relative;
                    left: getvw(20);
                    line-height: getvw(30);
                    h3{
                        font-size: .4rem ;
                    }
                    p{
                        width: getvw(260);
                        height: getvw(31);
                        display: flex;
                        justify-content: space-between;
                        font-size: 0.3067rem;
                        img{
                            
                            width: getvw(36);
                            height: getvw(34);
                        }
                    }
                    span{
                        font-size: 0.3467rem;
                        color: #ff9344;
                    }
                }
            }
            .right{
                display: flex;
                align-items: center;
                button{
                    width: getvw(111);
                    height: getvw(59);
                    border-radius:getvw(20) ;
                    background-color: #ff9344;
                    color: #fff;
                    border: none;
                }
            }
        }
    }  
    footer{ 
        width: 100%;
        position: fixed;
        background-color: #fff;
        .box{
            width: getvw(652);
            height: getvw(107);
            margin: 0 auto;
            margin-top: getvw(50);
            // background-color: pink;
            display: flex;
            justify-content: space-between;
            .boxone{
                width: getvw(73);
                height: getvw(100);
                a{
                    color: #000;
                    text-decoration: none;
                }
                i{
                    
                    color: #ff9344;
                    font-size: getvw(73);
                }
                p{
                    font-size: .3467rem;
                    position: relative;
                    bottom: getvw(15);
                    left: getvw(10);
                }
            }
        }
    }
}